<template>
    <div>
        <el-dialog v-model="state.dialog.show" title="新增标签" width="769px">
            <el-form ref="dialogFormRef" :model="state.form" :rules="state.rules" label-width="120px"
                     size="default">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="标签名称" prop="name">
                            <el-input v-model="state.form.name" clearable
                                      placeholder="请输入标签名称" @blur="initAlias"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="标签别名" prop="alias">
                            <el-input v-model="state.form.alias" clearable
                                      placeholder="请输入标签别名">
                                <template #append>
                                    <el-button @click="refreshAlias" :icon="Refresh"></el-button>
                                </template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
				<span class="dialog-footer">
					<el-button size="default" @click="onCancel">取 消</el-button>
					<el-button size="default" type="primary" @click="onSubmit">新 增</el-button>
				</span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import {reactive, ref} from 'vue';
import {tagApi} from "/@/api/tag";
import stores from "/@/stores";
import {Refresh} from "@element-plus/icons-vue";
import {commonApi} from "/@/api/common";

// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);

// 定义变量内容
const dialogFormRef = ref();
const state = reactive<DialogState<BlogTagAddDto>>({
    form: {
        alias: "", name: ""
    },
    dialog: {
        show: false
    },
    rules: {
        "name": [{required: true, message: "请输入标签名称", trigger: 'blur'}],
        "alias": [{required: true, message: "请输入标签别名", trigger: 'blur'}],
    }
});

// 打开弹窗
const openDialog = async () => {
    state.dialog.show = true;
};
// 关闭弹窗
const closeDialog = () => {
    state.dialog.show = false;
};
// 取消
const onCancel = () => {
    closeDialog();
};
// 提交
const onSubmit = () => {
    dialogFormRef.value?.validate((isValid: boolean) => {
            if (isValid) {
                stores.commonStoreState.openLoading()
                tagApi.addTag(state.form).then(() => {
                    closeDialog();
                    emit('refresh');
                    dialogFormRef.value?.resetFields();
                }).finally(() => {
                    stores.commonStoreState.closeLoading()
                })
            }
        }
    )
};
const initAlias = async () => {
    if (!state.form.alias) {
        state.form.alias = await commonApi.alias(state.form.name)
    }
}
const refreshAlias = async () => {
    state.form.alias = await commonApi.alias(state.form.name)
    dialogFormRef.value.validateField("alias");
}
// 暴露变量
defineExpose({
    openDialog,
});
</script>
